<template>
    <div class="system-drawer">
        <div class="setting-switch" @click="showSettingDrawer = !showSettingDrawer" :class="{ 'is-open': showSettingDrawer }">
            <i class="el-icon-close" v-if="showSettingDrawer"></i>
            <i class="el-icon-setting" v-else></i>
        </div>
        <el-drawer :visible.sync="showSettingDrawer" :with-header="false" :size="360">
            <div class="setting-wrap">
                <div class="setting-title">系统参数配置</div>
                <div class="setting-item">
                    <div class="label">顶部菜单栏</div>
                    <el-switch v-model="setting.showTopNav" />
                </div>
                <div class="setting-item">
                    <span class="label">多页签栏：</span>
                    <el-switch v-model="setting.showTags" />
                </div>
                <div class="setting-item">
                    <span class="label">
                        <el-tooltip placement="bottom" content="刷新进入页面时菜单栏默认状态" trigger="hover">
                            <i class="el-icon-question"></i>
                        </el-tooltip>
                        菜单栏默认：
                    </span>
                    <el-radio-group v-model="setting.collapse" size="mini">
                        <el-radio-button label="auto">自动</el-radio-button>
                        <el-radio-button :label="false">展开</el-radio-button>
                        <el-radio-button :label="true">折叠</el-radio-button>
                    </el-radio-group>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script>
    export default {
        name: 'system-drawer',
        data () {
            return {
                showSettingDrawer: false,
                setting: {
                    showTopNav: true,
                    showTags: true,
                    collapse: 'auto'
                }
            }
        },
        watch: {
            setting: {
                deep: true,
                handler (newVal) {
                    this.$store.commit('SET_SETTING', newVal)
                }
            }
        },
        created () {
            const setting = this.$store.state.common.setting || {}
            for (const key in setting) {
                this.setting[key] = setting[key]
            }
        }
    }
</script>

<style lang="scss">
.setting-switch {
    position: fixed;
    bottom: 90px;
    right: 40px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    z-index: 9999;
    background-color: #409EFF;
    box-shadow: 0 0 6px rgba($color: #409EFF, $alpha: 0.9);
    color: #fff;
    transition: transform 0.3s ease 1ms;
    font-size: 20px;

    &.is-open {
        transform: translateX(-330px);
        background-color: #F56C6C;
        box-shadow: 0 0 6px rgba($color: #F56C6C, $alpha: 0.9);
    }
}

.setting-wrap {
    padding: 40px 30px;

    .setting-title {
        font-weight: bold;
        margin-bottom: 30px;
        font-size: 18px;
    }

    .setting-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 40px;
        margin-bottom: 5px;
        position: relative;
        font-size: 14px;

        .label {
            color: #777;

            .el-icon-question {
                color: #409EFF;
                font-size: 16px;
                cursor: pointer;
            }
        }
    }
}
</style>
